<template>
  <div class="user-center-container">
    <n-card title="用户中心" class="user-card">
      <n-tabs type="line" animated>
        <!-- 个人资料 -->
        <n-tab-pane name="profile" tab="个人资料">
          <div class="profile-section">
            <div class="avatar-section">
              <n-avatar
                round
                size="large"
                :src="userInfo.avatar || 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'"
              />
              <n-button size="small" class="upload-btn">更换头像</n-button>
            </div>
            
            <n-form
              ref="formRef"
              :model="userInfo"
              label-placement="left"
              label-width="80"
              require-mark-placement="right-hanging"
            >
              <n-form-item label="用户名" path="username">
                <n-input v-model:value="userInfo.username" disabled />
              </n-form-item>
              
              <n-form-item label="昵称" path="nickname">
                <n-input v-model:value="userInfo.nickname" placeholder="请输入昵称" />
              </n-form-item>
              
              <n-form-item label="邮箱" path="email">
                <n-input v-model:value="userInfo.email" placeholder="请输入邮箱" />
              </n-form-item>
              
              <n-form-item label="手机号" path="phoneNumber">
                <n-input v-model:value="userInfo.phoneNumber" placeholder="请输入手机号" />
              </n-form-item>
              
              <n-form-item label="个人简介" path="bio">
                <n-input
                  v-model:value="userInfo.bio"
                  type="textarea"
                  placeholder="请输入个人简介"
                  :autosize="{ minRows: 3, maxRows: 5 }"
                />
              </n-form-item>
              
              <n-form-item>
                <n-button type="primary" @click="saveProfile">保存修改</n-button>
              </n-form-item>
            </n-form>
          </div>
        </n-tab-pane>
        
        <!-- 账号安全 -->
        <n-tab-pane name="security" tab="账号安全">
          <div class="security-section">
            <n-form
              ref="securityFormRef"
              :model="securityForm"
              label-placement="left"
              label-width="100"
            >
              <n-form-item label="当前密码" path="currentPassword">
                <n-input
                  v-model:value="securityForm.currentPassword"
                  type="password"
                  placeholder="请输入当前密码"
                  show-password-on="click"
                />
              </n-form-item>
              
              <n-form-item label="新密码" path="newPassword">
                <n-input
                  v-model:value="securityForm.newPassword"
                  type="password"
                  placeholder="请输入新密码"
                  show-password-on="click"
                />
              </n-form-item>
              
              <n-form-item label="确认新密码" path="confirmPassword">
                <n-input
                  v-model:value="securityForm.confirmPassword"
                  type="password"
                  placeholder="请再次输入新密码"
                  show-password-on="click"
                />
              </n-form-item>
              
              <n-form-item>
                <n-button type="primary" @click="changePassword">修改密码</n-button>
              </n-form-item>
            </n-form>
            
            <n-divider />
            
            <div class="security-options">
              <h3>安全选项</h3>
              <n-space vertical>
                <n-switch v-model:value="securityOptions.twoFactor">
                  <template #checked>已开启两步验证</template>
                  <template #unchecked>未开启两步验证</template>
                </n-switch>
                
                <n-switch v-model:value="securityOptions.loginNotification">
                  <template #checked>已开启登录通知</template>
                  <template #unchecked>未开启登录通知</template>
                </n-switch>
              </n-space>
            </div>
          </div>
        </n-tab-pane>
        
        <!-- 通知设置 -->
        <n-tab-pane name="notifications" tab="通知设置">
          <div class="notification-section">
            <n-space vertical>
              <n-switch v-model:value="notificationSettings.email">
                <template #checked>接收邮件通知</template>
                <template #unchecked>不接收邮件通知</template>
              </n-switch>
              
              <n-switch v-model:value="notificationSettings.push">
                <template #checked>接收推送通知</template>
                <template #unchecked>不接收推送通知</template>
              </n-switch>
              
              <n-switch v-model:value="notificationSettings.comments">
                <template #checked>接收评论通知</template>
                <template #unchecked>不接收评论通知</template>
              </n-switch>
              
              <n-switch v-model:value="notificationSettings.likes">
                <template #checked>接收点赞通知</template>
                <template #unchecked>不接收点赞通知</template>
              </n-switch>
              
              <n-switch v-model:value="notificationSettings.follows">
                <template #checked>接收关注通知</template>
                <template #unchecked>不接收关注通知</template>
              </n-switch>
              
              <n-switch v-model:value="notificationSettings.updates">
                <template #checked>接收更新通知</template>
                <template #unchecked>不接收更新通知</template>
              </n-switch>
              
              <n-button type="primary" @click="saveNotificationSettings">保存设置</n-button>
            </n-space>
          </div>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useMessage } from 'naive-ui'
import {
  NCard,
  NTabs,
  NTabPane,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NAvatar,
  NDivider,
  NSpace,
  NSwitch
} from 'naive-ui'

const message = useMessage()

// 用户信息
const userInfo = reactive({
  username: 'user123',
  nickname: '皮影爱好者',
  email: 'user123@example.com',
  phoneNumber: '13800138000',
  bio: '热爱皮影艺术，希望通过皮影快闪创作出精彩作品',
  avatar: ''
})

// 安全表单
const securityForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 安全选项
const securityOptions = reactive({
  twoFactor: false,
  loginNotification: true
})

// 通知设置
const notificationSettings = reactive({
  email: true,
  push: true,
  comments: true,
  likes: true,
  follows: true,
  updates: true
})

// 保存个人资料
const saveProfile = () => {
  message.success('个人资料保存成功')
  // 实际项目中应该调用API保存数据
}

// 修改密码
const changePassword = () => {
  if (securityForm.newPassword !== securityForm.confirmPassword) {
    message.error('两次输入的密码不一致')
    return
  }
  
  message.success('密码修改成功')
  // 实际项目中应该调用API修改密码
  
  // 清空表单
  securityForm.currentPassword = ''
  securityForm.newPassword = ''
  securityForm.confirmPassword = ''
}

// 保存通知设置
const saveNotificationSettings = () => {
  message.success('通知设置保存成功')
  // 实际项目中应该调用API保存设置
}
</script>

<style lang="scss" scoped>
.user-center-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  
  .user-card {
    margin-bottom: 20px;
  }
  
  .avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    
    .n-avatar {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }
  }
  
  .security-section,
  .notification-section {
    padding: 10px 0;
  }
  
  .security-options {
    margin-top: 20px;
    
    h3 {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .user-center-container {
    padding: 10px;
  }
}
</style> 